@ts-nocheck
<template>
  <el-menu
    :default-active="activeIndex"
    :mode="direction"
    :ellipsis="false"
    router
    style="border: none"
    @select="handleSelect"
  >
    <!-- <navItem v-for="(item, index) in routes" :key="index" :route="item"></navItem> -->
    <navItem
      v-for="(item, index) in basicRoutes"
      :key="index"
      :route="item"
    ></navItem>
    <el-sub-menu index="/more" v-if="extraRoutes">
      <template #title>
        <el-icon><Menu /></el-icon>
        <span>更多工具</span>
      </template>
      <nav-item v-for="item in extraRoutes" :key="item.path" :route="item" />
    </el-sub-menu>
  </el-menu>
</template>

<script>
import navItem from "./navItem.vue";
export default {
  name: "navigationContent",
  props: {
    direction: {
      type: String,
      required: false,
      default: "horizontal",
    },
  },
  components: {
    navItem,
  },
  data() {
    return {
      activeIndex: this.$route.path,
    };
  },
  computed: {
    routes() {
      return this.$router.options.routes;
    },
    basicRoutes() {
      // if (this.direction == "horizontal") {
      //   return this.routes.filter((item) => item.meta.alwaysShow == true);
      // } else {
      //   return this.routes;
      // }
      return this.routes.filter((item) => item.meta.alwaysShow == true);
    },
    extraRoutes() {
      // if (this.direction == "horizontal") {
      //   return this.routes.filter((item) => item.meta.alwaysShow == false);
      // } else {
      //   return null;
      // }
      return this.routes.filter((item) => item.meta.alwaysShow == false);
    },
  },
  watch: {
    $route: {
      handler: function (route) {
        this.activeIndex = route.path;
        // console.log(route);
      },
      immediate: true,
    },
  },
  methods: {
    handleSelect(target) {
      console.log("navigated: ", target);
      this.$emit("select", target);
    },
  },
  mounted() {
    // console.log(this.$route.path);
    // console.log(this.activeIndex);
    // this.activeIndex = this.$route.path;
    // console.log(this.activeIndex);
  },
};
</script>
